<template>
    <view class="container">
        <view class="nft-img">
            <image
                :src="product.mainImg"
                class="mainImg"
                mode="aspectFill"
            ></image>
            <view class="nft-sell-out" v-if="extState === 'complete' && product.hide != '1'"></view>
            <view class="mc" v-if="extState === 'wait_draw'">
                抽签 {{ product.grabEndAt|beginAtFormat }}
            </view>
            <view class="mc" v-if="extState === 'wait'">
                开售 {{ product.grabBeginAt|beginAtFormat }}
            </view>
            <view class="mc-time" v-if="extState === 'ing'">
                <u-count-down
                    :time="getEndTime(product.grabEndAt)"
                    format="HH:mm:ss"
                    autoStart
                    @change="onChange"
                >
                    <view class="time">
                        <view class="time-title">抢购倒计时</view>
                        <text class="time-item">{{ timeData.hours>=10?timeData.hours:'0'+timeData.hours}}:</text>
                        <text class="time-item">{{ timeData.minutes>=10? timeData.minutes:'0'+timeData.minutes }}:</text>
                        <text class="time-item">{{ timeData.seconds>=10? timeData.seconds:'0'+timeData.seconds }}</text>
                    </view>
                </u-count-down>
            </view>
            <view class="owner" v-if="product.nft_owner && product.nft_owner.length > 0"></view>
        </view>
        <u-text
           :text="product.name"
           size="30rpx"
           color="#000000"
           lineHeight="42rpx"
           margin="24rpx 0 20rpx 0"
           :lines="1"
        ></u-text>
        <view class="nft-info">
            <u-text
                :text="product.price"
                size="38rpx"
                bold
                color="#000000"
                lineHeight="45rpx"
                prefixIcon="rmb"
                block
                iconStyle="font-size: 22rpx; color: #000000; font-weight: bold;top: 10rpx;"
            ></u-text>
            <u-text
                :text="'限量 ' + (product.nft? product.nft.total:0)"
                size="24rpx"
                lineHeight="33rpx"
                align="right"
                color="#A2A2A2"
            ></u-text>
        </view>
        <view v-if="extState==='wait'" class="button btn-wait">等待开售</view>
        <view v-if="extState==='complete' && product.hide != '1'"  class="button btn-end">已结束</view>
        <view v-if="extState==='complete' && product.hide == '1'"  class="button btn-end">隐藏款</view>
        <view v-if="extState==='wait_draw'" class="button btn-wait">等待抽签</view>
        <view v-if="extState==='wait_pay'" class="button btn-wait">等待支付</view>
        <view v-if="extState==='ing'" @click.stop="signUp" class="button btn-normal">报名抢购</view>
    </view>
</template>

<script>
    import { parseTime, getUnixTime } from "@/untils"
    export default {
        name: "index",
        props: {
            product: {
                type: Object,
                default: () => {}
            },
            timestamp: {
                type: Number,
                default: null
            }
        },
        computed: {
          extState() {
              var openState = this.product.openState
              if (openState) {
                  if (this.product.grab) {
                      if (openState == 'ing') {
                          return "wait_draw"
                      }
                      if (openState == 'complete' && this.product.grab.state == 'win') {
                          return "wait_pay"
                      }
                  }
                  return openState
              } else {
                  return "normal"
              }
          }
        },
        filters: {
            beginAtFormat(val) {
                return parseTime(val, "{m}月{d}日 {h}:{i}:{s}")
            },
            endAtFormat(val) {
                var time = getUnixTime(val)
                console.log(time)
                return parseInt(time)
            }
        },
        data() {
            return {
                timeData: {},
                type: "wait",
                out: true
            }
        },
        methods: {
            onChange(e) {
                this.timeData = {
                    hours: e.hours + e.days * 24,
                    minutes: e.minutes,
                    seconds: e.seconds
                }
            },
            getEndTime(val) {
                var time = getUnixTime(val)
                return parseInt(time) - this.timestamp
            },
            signUp() {
                this.$emit("handelClick")
            }
        }
    }
</script>

<style lang="scss" scoped>
    .container {
        .nft-img {
            width: 100%;
            height: 342rpx;
            position: relative;
            .mainImg {
                width: 100%;
                height: 100%;
            }
            .nft-sell-out {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: url("https://img.ionepin.com/463b7804745148863dadae3ccb8497d4937d024d.png") no-repeat;
                background-size: 100% 100%;
            }
            .mc {
                width: 100%;
                position: absolute;
                bottom: 0;
                left: 0;
                height: 50rpx;
                background: rgba(0, 0 ,0 , 0.2);
                font-size: 28rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #FFFFFF;
                line-height: 2;
                text-align: center;
            }
            .mc-time {
                width: 100%;
                position: absolute;
                bottom: 0;
                left: 0;
                height: 50rpx;
                background: rgba(0, 0 ,0 , 0.2);
                .time {
                    display: flex;
                    font-size: 28rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #FFFFFF;
                    line-height: 2;
                    text-align: center;
                    justify-content: center;
                    .time-title {
                        margin-right: 10rpx;
                    }
                }
            }
            .owner {
                position: absolute;
                width: 127rpx;
                height: 50rpx;
                background: url("https://img.ionepin.com/73fc2060a95de29b5274cd11280fd3d3d6097e8a.png") no-repeat;
                background-size: 100% 100%;
                top: 0;
                right: 0;
            }
        }
        .nft-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .button {
            height: 58rpx;
            font-size: 28rpx;
            line-height: 58rpx;
            text-align: center;
            margin-top: 24rpx;
            box-sizing: border-box;
        }
        .btn-end {
            background: #F8F8F8;
            color: #868686;
        }
        .btn-wait {
            border: 1px solid #979797;
            color: #7F7F7F;
            background: #F8F8F8;
        }
        .btn-normal {
            color: #000000;
            background: #F8F8F8;
        }
    }
</style>
